<template>
  <div>
    <el-cascader v-if="show" v-model="value" :props="propsData" :options="options" clearable @change="handleChange">
    </el-cascader>
  </div>
</template>
<script>
  export default {
    props: {
        province: {//省
            type: String,
            default: ''
        },
        city: {//市
            type: String,
            default: ''
        },
        area: {//区
            type: String,
            default: ''
        },
        street: {//街道
            type: String,
            default: ''
        },
        isStreet: {//是否需要街道
            type: Boolean,
            default: true
        }
    },
    data() {
      return {
        show:false,//回 显
        options: [],//地址列表
        value:[],//绑定
        propsData:{
          label:'name',
          value:'name',
          lazy: true,
          lazyLoad: ((node, resolve) => {

            if(node.level>0){
              this.requests('admin/systemAddress/',  'get', { province:node.data.province,city:node.data.city,area: node.data.area }).then(res => {
                let list=[]

                res.data.data.map(item=>{
                  if(!node.data.province){
                    item['name']=item.province
                    item['leaf']=false
                  }else if(!node.data.city){
                    item['name']=item.city
                    item['leaf']=false
                  }else if(!node.data.area){
                    item['name']=item.area
                    if(this.isStreet){
                      item['leaf']=false
                    }else{
                      item['leaf']=true
                    }
                  }else{
                    item['name']=item.street
                    item['leaf']=true
                  }
                  list.push(item)
                })
                resolve(list);
              })
            }else if(node.root){
              resolve(this.options)
            }
          })
        }
      }
    },
    mounted() {
      // 获取省
      if(this.isStreet){
        this.value=[this.province, this.city,this.area, this.street]
      }else{
        this.value=[this.province, this.city,this.area]
      }
      this.requests('admin/systemAddress/',  'get', {  }).then(res => {
        if (res.errno == 0) {
          res.data.data.map(item=>{
            item['name']=item.province
            item['leaf']=false
            this.options.push(item)
          })
          if(this.province){
            this.getCity()
          }else{

            this.show=true
          }
        } else {
          this.$message.error(res.errmsg);
        }
      })

    },
    methods: {
      getCity(){//获取市
        this.requests('admin/systemAddress/',  'get', { province:this.province,}).then(res => {
          if (res.errno == 0) {
            let list=[]
            res.data.data.map(item=>{
              item['name']=item.city
              item['leaf']=false
              list.push(item)
            })
            this.options.forEach(item=>{
              if(item.name==this.province){
                item['children']=list
              }
            })
            if(this.city){
              this.getArea()
            } else{

            this.show=true
            }
          } else {
            this.$message.error(res.errmsg);
          }

        })
      },
      getArea(){//获取区
        let that=this
        this.requests('admin/systemAddress/',  'get', { province:this.province,city:this.city }).then(res => {
          if (res.errno == 0) {
            let list=[]
            res.data.data.map(item=>{
              item['name']=item.area
              if(that.isStreet){
                item['leaf']=false
              }else{
                item['leaf']=true
              }
              list.push(item)
            })
            that.options.forEach(item=>{
              if(item.name==that.province){
                item.children.forEach(items=>{
                  if(items.name==that.city){
                    items['children']=list
                  }
                })
              }
            })
            if(that.area&&that.isStreet){
              that.getStreet()
            } else{

            that.show=true
            console.log(that.options);
            }
          } else {
            this.$message.error(res.errmsg);
          }
        })
      },
      getStreet(){//获取街道
        let that=this
        this.requests('admin/systemAddress/',  'get', { province:this.province,city:this.city,area: this.area }).then(res => {
          if (res.errno == 0) {
            let list=[]
            res.data.data.map(item=>{
              item['name']=item.street
              item['leaf']=true
              list.push(item)
            })
            that.options.forEach(item=>{
              if(item.name==that.province){
                item.children.forEach(items=>{
                  if(items.name==that.city){
                    items.children.forEach(itemss=>{
                      if(itemss.name==that.area){
                        itemss['children']=list
                      }
                    })
                  }
                })
              }
            })
            that.show=true
          } else {
            this.$message.error(res.errmsg);
          }
        })
      },
      requests(url, method, data){//封装请求
          var this_ = this
          var url_ = 'http://toolapi.guanxikeji.com/' + url
          var promise = new Promise(function(resolve, reject) {
            this_
              .$http({
                url: url_,
                method: 'GET',
                data: data,
                params: data,
                headers: {
                  'Content-Type': 'application/json'
                }
              })
              .then(
                (result) => {
                  resolve(result.data)
                },
                (result) => {

                  reject(result)
                }
              )
          })
          return promise

      },
      handleChange(e){
        this.$emit('addressChange',e)
      }
    }
  }
</script>
<style scoped>
  .containers{
    height:;
  }
</style>

